;
(function () {
    /*********************************请求数据，渲染页面 ***************************/
    class GoodsDetails {
        constructor() {
            this.detail = document.querySelector('.phone');
            this.url = "http://localhost/blShop-gulp/src/json/goodlists.json";
            this.goodsId = location.search.split("=")[1];
            this.load();
        }
        load() {
            ajaxGet(this.url, (res) => {
                this.res = JSON.parse(res);
                this.display();
            });
        }
        display() {
            let i = 0;
            let onoff = this.res.some((val, idx) => {
                i = idx;
                return val.id === this.goodsId;
            })
            if (!onoff) {
                alert("不能直接打开详情页,请点击对应商品");
                return;
            }
            this.detail.innerHTML = `<div class="phleft">
            <div class="phimg">
                <div class="simg">
                    <img src="${this.res[i].url}" alt="">
                    <span></span>
                </div>
                <div class="bimg">
                    <img src="${this.res[i].url}" alt="">
                </div>
            </div>
            <div class="items">
                <ul id="picture">
                    <li>
                        <img jqimg="images/b1.jpg" id="img_0" class="lazytag itemborder" src="${this.res[i].url}" alt=""  style="display: inline;">
                    </li>
                    <li>
                        <img jqimg="images/b1.jpg" id="img_1" class="lazytag" src="${this.res[i].gurl1}" alt=""  style="display: inline;">
                    </li>
                    <li>
                        <img jqimg="images/b1.jpg" id="img_2" class="lazytag" src="${this.res[i].gurl2}" alt=""  style="display: inline;">
                    </li>
                    <li>
                        <img jqimg="images/b1.jpg" id="img_3" class="lazytag" src="${this.res[i].gurl3}" alt=""  style="display: inline;">
                    </li>
                </ul>
            </div>
            <div class="intro-meno-left">
                <div class="share-list">
                    <a href="###" class="shar-list-icon">分享</a>
                </div>
                <div class="number text_ellipsis">
                    商品编号 <span title="302010159427">${this.res[i].id}</span>
                </div>
            </div>
        </div>
        <div class="phright">
            <div class="goods-name">
                <h1>
                    <b class="late">自营百联</b>
                        ${this.res[i].name}
                </h1>
                <div class="title">
                    2020新款iPad Pro震撼上市！ A12Z芯片、视网膜屏、移动轻办公，你的下一台电脑何必是电脑！  
                    <a href="" >#i百联4周年庆#部分商品享建设银行3、6期分期免息#点击了解~分!期!攻!略!~~</a>
                </div>
            </div>
            <div class="price-line">
                <span class="black">活动价</span>
                <span class="price">
                    <strong id="FlashPrice"><i>¥</i>&nbsp;${this.res[i].price}</strong>
                 </span>
                 <span class="gral" id="productPoint"></span>
             </div>
            <div class="send-service">
                <dl>
                    <dt>配送</dt>
                    <dd>
                        <div class="distribution cl">
                            <div class="local"></div>
                            <div class="stock" title="初始运费5元,首重5kg,超重1元/kg;每满99元,减免5kg;">99元免基础运费（5kg内）</div>
                        </div>
                    </dd>
                </dl>
            </div>

            <div class="pay-sevice">
                <dl>
                    <dt>服务</dt>
                    <dd>
                        <div class="message-line">
                            本产品由百联云商提供发货和售后服务<em id="delivery-timeliness" style="display: none;"></em>
                        </div>
                        <div class="frozen-line" id="frozenLine"></div>
                        <ul class="service-line">
                            <li>不支持到店自提</li>
                            <li class="service-on">
                                <a href="https://promotion.bl.com/nc/PC_HDGL20170215000001233_1213.html" target="_blank">
                                    支持7天无理由退货（拆封后不支持）
                                </a>
                            </li>
                                <li>不支持货到付款</li>
                                </ul>
                        <ul class="service-line">
                            <li class="service-on">
                                发货时效(48小时内)<strong class="point-color3">5.00分,高</strong>
                            </li>
                        </ul>
                    </dd>
                </dl>
            </div>
            <div id="error-tip" class="choose-type">
                <dl>
                    <dt>
                        <span>型号及主要配置</span>
                    </dt>
                    <dd>
                        <ul class="color-list" id="ifHaveModel">
                            <li name="prop_model" goodssid="4225302" class="">WIFI 512G 深空灰</li>
                            <li name="prop_model" goodssid="4225303" class="">WIFI 512G 银色</li>
                            <li name="prop_model" goodssid="4225305" class="">WIFI 1T 深空灰</li>
                            <li name="prop_model" goodssid="4225310" class="">WIFI 128G 银色</li>
                            <li name="prop_model" goodssid="4225311" class="">WIFI 1T 银色</li>
                            <li name="prop_model" goodssid="4225322" class="select">WIFI 128G 深空灰</li>
                            <li name="prop_model" goodssid="4225324" class="">WIFI 256G 银色</li>
                            <li name="prop_model" goodssid="4225328" class="">WIFI 256G 深空灰</li>
                        </ul>
                    </dd>
                </dl>
            </div>
            <div class="change_num">
                <dl>
                    <dt class="item-number">购买数量</dt>
                    <dd>
                        <button id="reduce" class="btn-down-disable" index=${this.res[i].id}>-</button>
                        <input value="1" id="itemnumber" class="text">
                        <button id="addnum" class="btn-add" index=${this.res[i].id}>+</button>                        
                        <span>&nbsp;&nbsp;&nbsp;每单限购2件</span>
                        <span id="productStor">库存7件</span>
                    </dd>
                </dl>
            </div>
            <dl class="buy-cart">
                <dd>
                    <div class="btn-line" id="but_tiem">
                        <button class="buy-now" id="addpurchase">立即购买</button>
                        <span id="btnGood"><button id="addCart" class="btn-buy" index="${this.res[i].id}">加入购物车</button></span>
                    </div>
                </dd>
            </dl>
            <div class="praise">
                <span><b>89%</b>好评</span> <span>&nbsp;&nbsp; |&nbsp;&nbsp; </span>  <span><a href="" class="black">9</a> 评价</span>  <span>&nbsp;&nbsp; |&nbsp;&nbsp;</span>  <span class="blue" id="memberCommentPoints"><a href="" class="blue">评价返积分</a></span>
           </div>
        </div>`
            new Magnifier();
            this.addcart();
        }
        addcart() {
            this.add = document.getElementById('addCart');
            this.btnAdd = document.querySelector(".btn-add");
            this.btnReduce = document.querySelector(".btn-down-disable")
            this.addEvent();
        }
        addEvent() {
            let that = this;
            this.add.onclick = function () {
                that.goodsId = this.getAttribute("index");
                that.setData();
            }
            // 增加商品数量
            this.btnAdd.onclick = function () {
                this.previousElementSibling.value++
                that.goodsId = this.getAttribute("index");
                that.setData();
            }
            // 减少商品数量
            this.btnReduce.onclick = function () {
                if (this.nextElementSibling.value > 1) {
                    this.nextElementSibling.value--;
                    that.goodsId = this.getAttribute("index");
                    that.setData();
                }
            }


        }
        setData() {
            this.goodsMsg = localStorage.getItem("goodsMsg") ? JSON.parse(localStorage.getItem("goodsMsg")) : [];

            // 没有数据
            if (this.goodsMsg.length < 1) {
                // 第一次加入购物车
                this.goodsMsg.push({
                    id: this.goodsId,
                    num: 1
                });
            } else {
                // 非第一次加入购物车
                let i;
                // 找重复数据
                let onoff = this.goodsMsg.some((val, idx) => {
                    i = idx;
                    return val.id === this.goodsId;
                });
                // 再判断是否有重复数据
                if (onoff) {
                    this.goodsMsg[i].num++;
                } else {
                    // 没有直接加入购物车
                    this.goodsMsg.push({
                        id: this.goodsId,
                        num: 1
                    });
                }
            }
            localStorage.setItem("goodsMsg", JSON.stringify(this.goodsMsg));
        }
    }
    new GoodsDetails();




    /*************************放大镜*****************************************/
    class Magnifier {
        constructor() {
            this.sBox = document.querySelector(".simg");
            this.sImg = document.querySelector(".simg img");
            this.sSpan = document.querySelector(".simg span");
            this.bBox = document.querySelector(".bimg");
            this.bImg = document.querySelector(".bimg img");
            this.ul = document.querySelector(".items ul");
            this.phleft = document.querySelector(".phimg");

            this.addEvent();
        };
        addEvent() {
            var that = this;
            this.sBox.onmouseover = function () {
                that.over();
            }
            this.sBox.onmousemove = function (eve) {
                var e = eve || window.event;
                that.move(e);
            };
            this.sBox.onmouseout = function () {
                that.out();
            };
            this.ul.onclick = function (eve) {
                let e = eve || window.event;
                let target = e.target || e.srcElement;
                if (target.nodeName == "IMG") {
                    that.changeScr(target)
                }
            }
        };
        changeScr(that) {
            this.sImg.src = that.src;
            this.bImg.src = that.src;
        };
        over() {
            this.sSpan.style.display = 'block';
            this.bBox.style.display = 'block';
        };
        move(e) {
            var l = e.pageX - this.sBox.offsetLeft - this.phleft.offsetLeft - this.sSpan.offsetWidth / 2;
            var t = e.pageY - this.sBox.offsetTop - this.phleft.offsetTop - this.sSpan.offsetHeight / 2;
            if (l < 0) l = 0;
            if (t < 0) t = 0;
            if (l > this.sBox.offsetWidth - this.sSpan.offsetWidth) {
                l = this.sBox.offsetWidth - this.sSpan.offsetWidth;
            }
            if (t > this.sBox.offsetHeight - this.sSpan.offsetHeight) {
                t = this.sBox.offsetHeight - this.sSpan.offsetHeight;
            }
            this.sSpan.style.left = l + "px";
            this.sSpan.style.top = t + "px";
            var x = l / (this.sBox.offsetWidth - this.sSpan.offsetWidth);
            var y = t / (this.sBox.offsetHeight - this.sSpan.offsetHeight);
            this.bImg.style.left = (this.bBox.offsetWidth - this.bImg.offsetWidth) * x + "px";
            this.bImg.style.top = (this.bBox.offsetHeight - this.bImg.offsetHeight) * y + "px";
        };
        out() {
            this.sSpan.style.display = "none";
            this.bBox.style.display = "none";
        };
    };




})();